<template>
    <div class="courselist">
        <div class="box" @click="toclassifydetail(itemObj.id)">
            <h2>{{itemObj.title}}</h2>
            <p>2022-9-21 | 共60课时</p>
            <div class="img">
                <img :src="itemObj.cover_img" alt="">
                <span>{{itemObj.teachers_list.teacher_name}}</span>
            </div>
            <div class="foot">
                <span class="one">{{itemObj.brows_num}}已报名</span>
                <span class="two">{{itemObj.price==0?'免费':itemObj.price}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import { getClassifyDetail } from "@/http/request"
export default {
    props: {
        itemObj: Object
    },
    data(){
        return{
        }
    },
    methods: {
        async toclassifydetail(id) {
            let res = await getClassifyDetail(id)
            this.$router.push({name:"coursedet",query:{"id":id}})
        }
    }
}
</script>
<style lang="scss" scoped>
.courselist {
    padding: 10px;

    .box {
        background-color: #fff;
        padding: 10px 5px;

        .img {
            display: flex;
            align-items: center;
            margin: 10px 0;

            img {
                width: 30px;
                height: 30px;
                margin-right: 20px;
            }
        }

        .foot {
            display: flex;
            justify-content: space-between;

            .one {
                color: #777;
            }

            .two {
                color: green;
                font-size: 16px
            }
        }
    }
}
</style>


